import React, { useEffect } from 'react'
import PropTypes from 'prop-types';
import Snackbar from '@mui/material/Snackbar';

Message.propTypes = {
    flag: PropTypes.bool.isRequired,
    content: PropTypes.string.isRequired,
    vertical: PropTypes.string,
    horizontal: PropTypes.string,
    TransitionComponent: PropTypes.string,
    time: PropTypes.number,
    close: PropTypes.func.isRequired
}

Message.defaultProps = {
    flag: false,
    content: '消息',
    vertical: 'top',
    horizontal: 'center',
    TransitionComponent: 'SlideTransition',
    time: 2000
}

export default function Message(props) {
    const { flag, content, vertical, horizontal, TransitionComponent, time, close } = props;
    useEffect(() => {
        if (flag) {
            setTimeout(() => {
                close()
            },2000)
        }
    })
    return (
        <>
            <Snackbar
            anchorOrigin={{ vertical, horizontal }}
            TransitionComponent={TransitionComponent}
            open={flag}
            message={ content }
            key={vertical + horizontal}
            />
        </>
    )
}
